<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="./node_modules/_axios@0.21.1@axios/dist/axios.js"></script> -->
    </head>
    <body>
        <script>
            // axios请求   Axios.prototype.request
            // 1. 声明构造函数
            function Axios(config){
                this.config = config;
            }
            Axios.prototype.request = function(config){
                // 发送请求
                // 创建promise对象
                let promise = Promise.resolve(config);
                console.log(promise);
                // 声明一个数组
                let chains = [dispatchRequest,undefined];// undefined得用作是站位
                // 循环处理
                // 调用 then 方法指定回调
                let result = promise.then(chains[0],chains[1]);
                // 返回promise 的结果
                return result;
            }
            //2. dispatchRequest 函数
            function dispatchRequest(config){
                // console.log("dispatchRequest函数");
                // 调用适配器去发送请求
                return xhrAdapter(config).then(response =>{
                    console.log(response);
                    // 响应的结果进行转换处理
                    return response;
                },error =>{
                    console.log(error);
                    throw error;
                })
            }
            // 3.适配器
            function xhrAdapter(config){
                // console.log("xhrAdapter 函数执行");
                return new Promise((resolve,reject)=>{
                    // 发送ajax请求
                    let xhr  =  new XMLHttpRequest();
                    // 初始化
                    xhr.open(config.method,config.url);
                    // 发送
                    xhr.send();
                    // 绑定事件
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState === 4){
                            if(xhr.status >= 200 && xhr.status < 300){
                                // 成功状态
                                resolve({
                                    // 配置对象
                                    config:config,
                                    // 响应体
                                    data:xhr.response,
                                    // 响应头
                                    headers:xhr.getAllResponseHeaders(),//字符串
                                    //xhr请求对象
                                    request:xhr,
                                    // 响应状态码
                                    status:xhr.status,
                                    //响应字符串
                                    statusText:xhr.statusText
                                })
                            }else{
                                //失败状态
                                reject(new Error('请求失败的 的状态码'+xhr.status));
                            }
                        }
                    }
                })
            }
            //4.创建axios函数
            let axios = Axios.prototype.request.bind(null);

            axios({
                method:"get",
                url:"http://127.0.0.1:3000/posts"
            }).then(response=>{
                console.log(response);
            })
        </script>
    </body>
</html>